<template>
	<el-container class="close-container">
		<div class="top_container_row" v-if="loaded">
			<el-row >
				<el-col class="top_col" style="font-size: 20px; padding-left: 10px" :span="12">{{article.name}}</el-col>
				<el-col class="top_col" :offset="7" :span="4" style="align-content: center; justify-content: space-between">
					<el-button type="primary" @click="checkClick" :disabled="checkAnswer">对答案</el-button>
					<el-button type="primary" @click="backClick">返回</el-button>
				</el-col>
			</el-row>
		</div>
		
		<el-main v-if="loaded" style="margin-top: 60px">
			<el-card class="box-card">
				<div class="article" style="padding: 20px;">
					<div v-for="i in 21" :key="i" style="display: inline; line-height: 30px; font-size: 15px;" >
						{{article.sentence[i-1]}}
						<el-popover v-if="checkAnswer" :content="analysis[i]"
												placement="bottom" title="解析" width="200" trigger="hover" >
							<div slot="reference" style="display: inline; padding-left: 5px; padding-right: 5px;" 
								:style="`color:${blank_colors[i-1]}`">{{blank_contents[i-1]}}</div>
						</el-popover>
						<el-dropdown v-else @command="choiceClick"> 
							<span class="el-dropdown-link" style="color: #409eff;"> {{blank_contents[i-1]}} </span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-for="each in article['choice'][i-1]" :key="each" :command="[each,i-1]">{{each}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</el-card>
			
		</el-main>
	</el-container>
</template>
<script>
import request from '@/request'

export default {
	name: 'ClosePage',
	data(){
		return {
			article: { name: null, choice: [], answer:[]},
			checkAnswer: false, 
			// blanks: [], // {content, color}, 报错： Cannot read properties of undefined (reading 'content')
			blank_contents: [], blank_colors: [],
			loaded: false
		}
	},
	mounted() {
		this.loadArticle(this.$route.params.id)
	},
	computed: {
		analysis(){
			return this.article.answer.map(item=>item[1]?item[1]:'无')
		}
	},
	methods: {
		loadArticle(id=1){
			request({ method: 'get', url: '/close', params: {id} })
			.then(resp=>{
				var article = resp.data
				var keys = ['sentence', 'choice', 'answer']
				keys.map(key=>{
					article[key] = JSON.parse(article[key])
				})
				article.name = article.name.replace('.txt','')
				this.article = article
				this.blank_contents = Array(20).fill("____")
				this.blank_colors = Array(20).fill('#2270be')
				this.loaded = true
				this.$forceUpdate()
			})
		},
		choiceClick(e){ // [word,idx]
			this.$set(this.blank_contents,e[1], e[0])
		},
		checkClick(){
			console.log('check');
			for(var i=0;i<20;i++){
				var corret = this.article.choice[i][['A','B','C','D'].indexOf(this.article.answer[i][0])]
				corret = corret? corret: '?'
				if(this.blank_contents[i]==corret) 
					this.$set(this.blank_colors, i, '#67c23a')
				else{
					this.$set(this.blank_contents,i,`${this.blank_contents[i]}->${corret}`)
					this.$set(this.blank_colors,i,"#f56c6c")
				}
			}
			this.checkAnswer = true
		},
		backClick(){
			this.$router.go(-1)
		}
	},
}
</script>

<style >
.top_container_row{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 0 6px rgba(0, 0, 0, .1);
  position: fixed; top: 61px; left: 0; height: 60px;
  width: 100%;
  background: white;
}
.top_col{
	display: flex;
	height: 60px;
	line-height: 60px;
	/* align-content: center; */
}
.top_col .el-button{
	margin-top: 10px;
	height: 40px;
}
.box-card{
	text-align: left;
}
.close-container{
	background: #f3f4f6;
	height: calc(100vh - 61px);
}
</style>